<template>
	<view class="content">
		<view class="login-t">
			<image class="login-logo" :src="logoImage" mode="aspectFill"></image>
		</view>
		<view>
			<view class="login-m">
				<view class="login-item">
					<input type="text" v-model="loginForm.username" :maxlength="maxMobile" placeholder="请输入手机号码"
						placeholder-class="login-i1tem-i-p" />
				</view>
				<view class="login-item flc">
					<input class="login-item-input" :password="true" placeholder-class="login-item-i-p" type="text"
						v-model="loginForm.password" placeholder="请输入密码" />
				</view>
				<view class="login-item" v-if="isCaptcha">
					<input class="login-item-input" placeholder-class="login-item-i-p" type="text"
						v-model="loginForm.code" placeholder="输入验证码" />
					<img class='codeimg' :src="captchaData" alt="" @click="getCaptchaData">
				</view>
			</view>
			<view class="login-b">
				<button :class="loginButtonClass" @click="loginHandler" hover-class="btn-hover">登录</button>
				<view class="login-other flc">
					<view class="fz12 item" @click="selectLoginType">
						验证码登录
					</view>
					<view class="fz12 item" @click="toReg">
						注册
					</view>
				</view>
			</view>
		</view>
		<!--  微信浏览器里 -->
		<!-- #ifdef H5 -->
		<template v-if="weixinBrowser">
			<view class="fz12 g5">
				第三方账号登录：
			</view>
			<view class="flc third-block">
				<view class="third-item" v-for="(item, key,index) in thirdPartyLogins" :key="index"
					@click="handleThirdLogin(item)">
					<image class="third-item-img" :src="getThirdLoginImg(key)" mode="aspectFill"></image>
				</view>
			</view>
		</template>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS||APP-PLUS-NVUE -->
		<view class="fz12 g5">
			第三方账号登录：
		</view>
		<view class="flc third-block" v-if="thirdPartyLogins.length>0">
			<view class="third-item" v-for="(item, key,index) in thirdPartyLogins" :key="key"
				@click="handleThirdLoginApp(item)">
				<image class="third-item-img" src="/static/image/ic-wechat.png" mode="aspectFill" v-if="item=='weixin'">
				</image>
			</view>
		</view>
		<!-- #endif -->


	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config/config.js'
	import {
		goBack,
		jumpBackPage
	} from '@/config/mixins.js'
	export default {
		mixins: [goBack, jumpBackPage],
		data() {
			return {
				msgType: "success",
				messageText: "失败了",
				maxMobile: 11,
				isCaptcha: true, // 是否需要验证码
				captchaData: '', // 验证码图片地址
				btnb: 'btn btn-square btn-c btn-all', // 按钮bg
				weixinBrowser: false, // 是否是微信浏览器
				thirdPartyLogins: [], // 第三方登录列表	  
				loginForm: {
					username: "admin",
					password: "9464429743",
					rememberMe: false,
					code: "",
					uuid: ""
				}
			}
		},
		onLoad(options) {
			//获取验证码
			this.getCaptchaData();
			if (options.invitecode) {
				this.$db.set('invitecode', options.invitecode)
			}
			// 判断浏览器环境
			this.weixinBrowser = this.$common.isWeiXinBrowser()

			if (this.weixinBrowser) {
				this.getAuths()
			}
			// #ifdef APP-PLUS||APP-PLUS-NVUE
			this.getAppAuths();
			// #endif
		},
		onShow() {
			if (this.$db.get('userToken')) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		computed: {

			// 动态更改登录按钮bg
			loginButtonClass() {
				return this.loginForm.username && this.loginForm.username.length > 3 ?
					this.btnb + ' btn-b' :
					this.btnb
			},
			logoImage() {
				return this.$store.state.config.shop_logo
			},
			getThirdLoginImg(key) {

				return key => {
					if (key == 'Wxofficial') {
						return '/static/image/ic-wechat.png'
					} else if (key == 'weixin') {
						return '/static/image/ic-wechat.png'
					}
				}
			}
		},
		methods: {
			// 验证手机号
			rightMobile() {
				let res = {}
				if (!this.mobile) {
					res.status = false
					res.msg = '请输入手机号'
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
					res.status = false
					res.msg = '手机号格式不正确'
				} else if (!this.pwd) {
					res.status = false
					res.msg = '请输入密码'
				} else {
					res.status = true
				}
				return res
			},
			// 登录处理
			loginHandler() {

				if (this.loginForm.username && this.loginForm.username.length > 3) {
					this.toLogin()
				}
			},
			// 获取验证码图片地址
			getCaptchaData() {
				this.$api.getCaptchaData().then(res => {
					console.log(res)
					this.captchaData = "data:image/gif;base64," + res.img;
					this.loginForm.uuid = res.uuid;
				})

			},
			// 去注册
			toReg() {
				this.$common.navigateTo('/pages/login/register/index')
			},
			// 去登录
			toLogin() {

				console.info(this.loginForm)
				this.$api.login(this.loginForm).then(res => {

					console.info(res)
					if (res.code === 200) {
						this.$db.set('userToken', res.data.access_token)
						this.redirectHandler()
					} else {
						// 登录失败的做法
						uni.showToast({
							title: res.msg,
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 4秒
							duration: 4000
						})
					}

				});
			},
			// 重定向跳转 或者返回上一个页面
			redirectHandler() {
				this.$db.del('invitecode')
				this.handleBack()
			},
			// 登录方式切换
			selectLoginType() {
				this.$common.redirectTo('/pages/login/login/index')
			},
			// 获取第三方登录列表
			getAuths() {
				let data = {
					url: baseUrl + 'wap/pages/author'
				}
				this.$api.getTrustLogin(data, res => {
					if (res.status) {
						this.thirdPartyLogins = res.data
					}
				})
			},
			// 第三方登录授权
			handleThirdLogin(url) {
				this.$common.redirectTo('')
				let redirect = this.$store.state.redirectPage
				this.$db.set('redirectPage', redirect)
				window.location.href = url
			},
			//获取APP信任登录
			getAppAuths() {
				let _this = this;
				_this.thirdPartyLogins = [];
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (res.errMsg == 'getProvider:ok') {
							_this.thirdPartyLogins = res.provider;

						}
					}
				});
			},
			//app第三方登录
			handleThirdLoginApp(type) {
				uni.showLoading({
					title: '加载中'
				});
				let _this = this;
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		/*  #ifdef  H5  */
		height: calc(100vh - 90upx);
		/*  #endif  */
		/*  #ifndef  H5  */
		height: 100vh;
		/*  #endif  */
		background-color: #fff;

		padding: 0upx 100upx;
	}

	.login-t {
		text-align: center;
		padding: 50upx 0;
	}

	.login-logo {
		width: 180upx;
		height: 180upx;
		border-radius: 20upx;
		background-color: #f8f8f8;
		/* margin: 0 auto; */
	}

	.login-m {
		margin-bottom: 100upx;
	}

	.login-item {
		border-bottom: 2upx solid #d0d0d0;
		overflow: hidden;
		padding: 10upx;
		font-size: 28upx;
		color: #333;
		margin-bottom: 30upx;
		display: flex;
		align-items: center;
	}

	.login-item-input {
		display: inline-block;
		// width: 60%;
		flex: 1;
		box-sizing: border-box;
	}

	.codeimg {
		width: 210rpx;
	}

	.login-item .btn {
		display: inline-block;
		font-size: 28upx;
		border: none;
		width: 40%;
		padding: 0;
		line-height: 1.7;
		float: right;
	}

	.login-b .btn {
		color: #999;
	}

	.btn-b {
		color: #fff !important;
	}

	.registered-item {
		overflow: hidden;
		width: 100%;
	}

	.registered {
		float: right;
	}

	.registered-item .btn-square {
		color: #333;
	}

	.third-block {
		justify-content: center;
		padding-top: 40upx;

		.third-item {
			width: 80upx;
			height: 80upx;
			background: $g2;
			border-radius: 50%;
			padding: 16upx;

			&-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.login-other {
		margin-bottom: 40upx;

		.item {
			padding: 20upx 0;
		}
	}
</style>